<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>黄欣</title>
    <link rel="stylesheet" href="./css/swiper.min.css">
    <style>
        
        
       *{
           margin:0;
           padding:0;
           
       }
       ul li{
           list-style: none;
       }
       .nav{
           width:100%;
           height: 162px;
           text-align: center;
           font-size: 12px;
       }
       a{
           text-decoration: none;
       }
       .nav li{
           width:20%;
           height: 74px;
           float: left;
       }
       .nav li img{
           width: 40px;
       }
       .nav span{
           display: block;
           color: #6666;
       }
       .open{
            width: 100%;
            height: 44px;
            background-color: #232326;
            color: #fff;
            display: flex;
        }
        .open li{
            display:flex;
            justify-content: center;
            align-items: center;
        }
        .open li:nth-child(1){
            width: 8%;
        }
        .open li:nth-child(1) img{
            width: 10px;
        }
        .open li:nth-child(2){
            width: 10%;
        }
        .open li:nth-child(2) img{
            width:30px;
        }
        .open li:nth-child(3){
            width: 57%;
        }
        .open li:nth-child(4){
            width: 25%;
            background-color: #cd2323;
        }
        .sousuo-wrapper{
            width: 100%;
            height: 44px;
            background-color: #c82519;
            color: #fff;
            display: flex;
            align-items: center;
            top:0;
            position: static;
            z-index: 99;
        }
        .bth,.denglu{
            width: 44px;
            height: 44px;
        }
        .sousuo{
            flex: 1;
            background-color: #fff;
            height: 30px;
            border-radius: 15px;
        }
        .denglu{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .bth span{
            margin: 12px 0 0 10px;
            width: 20px;
            height: 20px;
            display: block;
            background: url(zuo.png) no-repeat;
            background-size: 100% 100%;
        }
        .jd{
            width: 20px;
            height: 15px;
            background: url(xb.png) no-repeat;
            background-size: 200px;
            margin: 8px 8px 0px 15px;
            position: relative;
            z-index: 1;
            float: left;
        }
        .fangdajing{
            width: 18px;
            height: 15px;
            background: url(xb.png) no-repeat;
            background-position: -80px 0;
            background-size: 200px;
            margin: 8px 0 0 15px;
            position: relative;
            z-index: 1;
            float: left
        }
        .jd::after{
            content: '';
            display: block;
            width: 1px;
            height: 15px;
            background-color: #dddddd;
            position:relative;
            left: 30px;
        }
        .footer{
            width: 100%;
            height: 45px;
            background-color: #fff;
            display: flex;
            position: absolute;
            bottom: 0;
            
            
        }
        .footer li{
            flex:20%;

        }
        .footer li img{
            width: 66px;
            

        }
        .swiper-container {
      width: 100%;
      height: 100%;
      align-items: center;
      padding-top: 60px;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .swiper-wrapper img{
        align-items: center;
    }





    </style>
</head> 

<body>
    <ul class="open">
        <li><img src="./image/x.png" alt=""></li>
        <li><img src="./image/jd.png" alt=""></li>
        <li>打开京东APP，购物更轻松</li>
        <li>立即打开</li>
    </ul>

    <div class="sousuo-wrapper">
        <div class="bth">
            <span></span>
        </div>
        <div class="sousuo">
            <div class="jd"></div>
            <div class="fangdajing"></div>
        </div>
        <div class="denglu">登录</div>
    </div>
    
    </div>
<!-- 轮播图 -->
<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><a href=""><img src="./image/2.1.jpg" alt=""></a></div>
      <div class="swiper-slide"><a href=""><img src="./image/2.2.jpg" alt=""></a></div>
      <div class="swiper-slide"><a href=""><img src="./image/2.3.jpg" alt=""></a></div>
      <div class="swiper-slide"><a href=""><img src="./image/2.4.jpg" alt=""></a></div>
      <div class="swiper-slide"><a href=""><img src="./image/2.5.jpg" alt=""></a></div>
      <div class="swiper-slide"><a href=""><img src="./image/2.6.jpg" alt=""></a></div>
      
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
  </div>

  <!-- Swiper JS -->
  <script src="./js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });
  </script>
    <ul class="nav">
        <li>
            <a href="javascript:;">
                <img src="./image/1.png" alt="">
                <span>京东超市</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="./image/2.png" alt="">
                <span>数码电器</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="./image/3.png" alt="">
                <span>京东服饰</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="./image/4.png" alt="">
                <span>京东生鲜</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="./image/5.png" alt="">
                <span>京东到家</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="./image/6.png" alt="">
                <span>充值缴费</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="./image/7.png" alt="">
                <span>9.9元拼</span>
            </a>
        </li><li>
            <a href="javascript:;">
                <img src="./image/8.png" alt="">
                <span>领券</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="./image/9.png" alt="">
                <span>领金贴</span>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="./image/10.png" alt="">
                <span>PLUS会员</span>
            </a>
        </li>
    </ul>
    <!--最底部导航条-->
    <ul class="footer">
        <li><a href="javascript:;"><img src="./image/1.1.png" alt=""></a></li>
        <li><a href="javascript:;"><img src="./image/1.2.png" alt=""></a></li>
        <li><a href="javascript:;"><img src="./image/1.3.png" alt=""></a></li>
        <li><a href="javascript:;"><img src="./image/1.4.png" alt=""></a></li>
        <li><a href="javascript:;"><img src="./image/1.5.png" alt=""></a></li>



    </ul>
    
  
   
    
   
  <!-- Swiper JS -->
  <script src="./js/swiper.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
	  speed: 2000,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>

</body>
</html>